<template>
  <div class="ten_box">
    <m-header modile-title="练习16" go-back="true"></m-header>
    <div class="box_main">
      <ul>
        <li>
          <span>起始时间</span>
          <span @click="openPicker">{{showTime}}<i>></i></span>
        </li>
      </ul>
    </div>
    <!--时间选择弹窗-->
    <mt-datetime-picker
      v-model="pickerVisible"
      type="date"
      ref="picker"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      @confirm="handleConfirm">
    </mt-datetime-picker>
    <ul>
      <li v-if="bas==='BasicSatisfied'">A({{basCont}})</li>
      <li v-if="type.GeneralSatisfied==='GeneralSatisfied'">B</li>
      <li v-if="type.MoreSatisfied==='MoreSatisfied'">C</li>
    </ul>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    background: #fff;
    .box_main {
      ul {
        li {
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          span {
            font-size: 20px;
            i {
              margin-left: 10px;
              font-size: 20px;
              color: #292929;
            }
          }
          span:last-child {
            color: #999;
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'

  export default {
    data() {
      return {
        pickerVisible: '', // 默认时间
        showTime: '请选择截止时间',
        type: {
          BasicSatisfied: "BasicSatisfied-100",
          GeneralSatisfied: "GeneralSatisfied-80",
          MoreSatisfied: "MoreSatisfied-50"
        },
        bas: '',
        basCont: ''
      }
    },
    created() {
      console.log(this.type.BasicSatisfied.split('-')[0]);
      this.bas = this.type.BasicSatisfied.split('-')[0];
      this.basCont = this.type.BasicSatisfied.split('-')[1];
    },
    methods: {
      openPicker() {
        this.pickerVisible = new Date(); // 使默认时间变成当前时间
        this.$refs.picker.open()
      },
      handleConfirm() {
        // console.log(this.pickerVisible)
        // （中国标准时间格式）转换时间格式为年-月-日
        var d = new Date(this.pickerVisible);
        var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        console.log(youWant)
        this.showTime = youWant
      }
    },
    components: {
      mHeader
    }
  }
</script>
